<template>
  <div id="auction-item">
    <div class="cover" @click="$router.push('/art/' + art.id)">
      <img :src="art.cover_hash | ipfsHash" alt="cover" />
    </div>
    <div class="info-box" v-if="user.user_address!=null">
      <div class="title-box">
        <div class="title">{{ art.title }}</div>
        <div class="status status-bidding" v-if="new Date().getTime() > new Date(art.starttime).getTime() && new Date().getTime() < new Date(art.endtime).getTime()">正在拍卖</div>
        <div class="status status-warring" v-if="new Date().getTime() < new Date(art.starttime).getTime()">正在拍卖</div>
        <div class="status status-end" v-if="new Date().getTime() > new Date(art.endtime).getTime()">拍卖结束</div>
      </div>
      <div class="user-box" >
        <div class="user-tip">最高竞价者</div>
        <div class="avatar" @click="$router.push('/user/' + user.user_address)">
          <img
            :src="user.logo | ipfsHash"
            alt="avatar"
            v-if="user.logo != null"
          />
          <RandomAvatar
            :user_address="user.user_address"
            v-if="user.logo == null"
          />
        </div>
      </div>
      <div class="price">
        <div class="price-tip">当前价格</div>
        <div class="price-text">{{ bids[0].value | weiToEth }} ETH</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOtherInformation } from "@/api";
import getAbi from "@/utils/contractAbi";

export default {
  name: "AuctionItem",
  props: ["art"],
  data() {
    return {
      user: {},
      // bids 合约返回的竞价记录
      bids: [],
    };
  },

  async mounted() {
    let abi = await getAbi();

    // 获取竞拍历史
    abi.methods
      .returnBids(this.art.nft_id)
      .call()
      .then((res) => {
        let result = [];
        if (res.length != 0) {
          for (var i = res.length - 1; i >= 0; i--) {
            result.push(res[i]);
          }
        }

        // console.log(result);
        this.bids = result;

        // 查询用户信息
        getOtherInformation(
          this.$store.getters.user_address,
          this.bids[0].bidder
        ).then((res) => {
          this.user = res[0];
        });
        this.bids[0].bidder;
      });
  },
};
</script>

<style lang='less'>
#auction-item {
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  border-radius: 0 0 10px 10px;

  .cover {
    height: 200px;
    cursor: pointer;
    img {
      border-radius: 10px;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .info-box {
    padding: 20px;
    .title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 18px;
      }
      .status {
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 99px;
      }
      .status-notstart {
        background: var(--themeColor2);
        color: #fff;
      }
      .status-bidding {
        background: var(--themeColor4);
        color: #fff;
      }
      .status-end {
        background: #999;
        color: #fff;
      }
    }
    .user-box {
      display: flex;
      margin-top: 10px;
      align-items: center;
      .user-tip {
        font-size: 14px;
        color: #999;
      }
      .avatar {
        margin-left: 15px;
        height: 30px;
        width: 30px;
        cursor: pointer;
        img {
          border-radius: 50%;
          height: 100%;
          width: 100%;
        }
      }
    }
    .price {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .price-tip {
        font-size: 14px;
        color: #999;
      }
      .price-text {
        margin-left: 10px;
        font-size: 14px;
      }
    }
  }
}
</style>